<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语智能答题系统</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #4895ef;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4cc9f0;
            --error-color: #f72585;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light-color);
            color: var(--dark-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            flex: 1;
        }
        
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 2;
        }
        
        header p {
            font-size: 1.1rem;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }
        
        header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            animation: rotate 20s linear infinite;
            z-index: 1;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            padding: 2rem;
            margin-bottom: 2rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        }
        
        .btn {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            margin: 0.5rem;
        }
        
        .btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-error {
            background-color: var(--error-color);
        }
        
        .btn-error:hover {
            background-color: #d91a6d;
        }
        
        .btn-success {
            background-color: var(--success-color);
        }
        
        .btn-success:hover {
            background-color: #3ab4d9;
        }
        
        .flex-center {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .hidden {
            display: none !important;
        }
        
        .loading {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .question-container {
            margin-bottom: 1.5rem;
        }
        
        .question {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            font-weight: 600;
            line-height: 1.5;
        }
        
        .options {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.8rem;
        }
        
        .option {
            padding: 1rem;
            border-radius: 8px;
            background-color: #f1f3f5;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
        }
        
        .option:hover {
            background-color: #e9ecef;
        }
        
        .option.selected {
            background-color: var(--accent-color);
            color: white;
        }
        
        .option.correct {
            background-color: var(--success-color);
            color: white;
        }
        
        .option.incorrect {
            background-color: var(--error-color);
            color: white;
        }
        
        .option input {
            margin-right: 10px;
        }
        
        .progress-container {
            width: 100%;
            background-color: #e9ecef;
            border-radius: 50px;
            margin: 1.5rem 0;
            height: 10px;
        }
        
        .progress-bar {
            height: 100%;
            border-radius: 50px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            transition: width 0.3s ease;
        }
        
        .result-card {
            text-align: center;
        }
        
        .result-score {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary-color);
            margin: 1rem 0;
        }
        
        .wrong-questions {
            margin-top: 2rem;
            text-align: left;
        }
        
        .wrong-question {
            background-color: #fff5f7;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            border-left: 4px solid var(--error-color);
        }
        
        .wrong-question .correct-answer {
            color: var(--success-color);
            font-weight: 600;
            margin-top: 0.5rem;
        }
        
        .tab-container {
            display: flex;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #dee2e6;
        }
        
        .tab {
            padding: 0.8rem 1.5rem;
            cursor: pointer;
            font-weight: 600;
            color: #6c757d;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            color: var(--primary-color);
            border-bottom: 3px solid var(--primary-color);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .empty-state {
            text-align: center;
            padding: 3rem 0;
            color: #6c757d;
        }
        
        .empty-state img {
            max-width: 200px;
            margin-bottom: 1rem;
            opacity: 0.7;
        }
        
        .floating-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 100;
        }
        
        .floating-btn:hover {
            transform: scale(1.1);
            background-color: var(--secondary-color);
        }
        
        .floating-btn i {
            font-size: 1.5rem;
        }
        
        .confetti {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 999;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            header h1 {
                font-size: 2rem;
            }
            
            .card {
                padding: 1.5rem;
            }
            
            .grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>英语智能答题系统</h1>
        <p>AI驱动的英语学习平台 - 提升你的英语水平</p>
    </header>
    
    <div class="container">
        <!-- 首页 -->
        <div id="home-page" class="card">
            <h2 style="text-align: center; margin-bottom: 2rem;">欢迎使用英语智能答题系统</h2>
            <div class="flex-center">
                <button id="start-btn" class="btn">开始答题</button>
                <button id="wrong-questions-btn" class="btn btn-outline">错题本</button>
            </div>
        </div>
        
        <!-- 选择考试类型 -->
        <div id="exam-type-page" class="card hidden">
            <h2 style="text-align: center; margin-bottom: 2rem;">选择考试类型</h2>
            <div class="grid">
                <div class="card" style="cursor: pointer;" onclick="selectExamType('CET4')">
                    <h3>大学英语四级 (CET4)</h3>
                    <p>适合准备大学英语四级考试的学生</p>
                </div>
                <div class="card" style="cursor: pointer;" onclick="selectExamType('CET6')">
                    <h3>大学英语六级 (CET6)</h3>
                    <p>适合准备大学英语六级考试的学生</p>
                </div>
                <div class="card" style="cursor: pointer;" onclick="selectExamType('POSTGRADUATE')">
                    <h3>考研英语</h3>
                    <p>适合准备研究生入学考试的学生</p>
                </div>
            </div>
            <div class="flex-center" style="margin-top: 2rem;">
                <button id="back-to-home-btn" class="btn btn-outline">返回首页</button>
            </div>
        </div>
        
        <!-- 答题页面 -->
        <div id="quiz-page" class="hidden">
            <div class="card">
                <div class="progress-container">
                    <div id="progress-bar" class="progress-bar" style="width: 0%"></div>
                </div>
                
                <div id="question-container" class="question-container">
                    <div id="loading-questions" class="flex-center" style="padding: 2rem;">
                        <div class="loading"></div>
                        <span>AI正在生成题目...</span>
                    </div>
                    
                    <div id="quiz-content" class="hidden">
                        <div class="question" id="question-text"></div>
                        <div class="options" id="options-container"></div>
                    </div>
                    
                    <div id="result-content" class="hidden">
                        <div class="result-card">
                            <h2>答题完成!</h2>
                            <div class="result-score" id="score-text"></div>
                            <p id="result-message"></p>
                            <div class="flex-center" style="margin-top: 2rem;">
                                <button id="review-wrong-btn" class="btn btn-error">查看错题</button>
                                <button id="try-again-btn" class="btn">再试一次</button>
                                <button id="back-to-home-btn-2" class="btn btn-outline">返回首页</button>
                            </div>
                        </div>
                        
                        <div id="wrong-questions-review" class="wrong-questions hidden">
                            <h3>错题回顾</h3>
                            <div id="wrong-questions-container"></div>
                        </div>
                    </div>
                </div>
                
                <div class="flex-center">
                    <button id="submit-answer-btn" class="btn hidden">提交答案</button>
                    <button id="next-question-btn" class="btn hidden">下一题</button>
                </div>
            </div>
        </div>
        
        <!-- 错题本页面 -->
        <div id="wrong-questions-page" class="card hidden">
            <div class="tab-container">
                <div class="tab active" data-tab="cet4">四级错题</div>
                <div class="tab" data-tab="cet6">六级错题</div>
                <div class="tab" data-tab="postgraduate">考研错题</div>
            </div>
            
            <div class="tab-content active" id="cet4-tab">
                <div id="cet4-wrong-questions">
                    <!-- 错题将通过JS动态加载 -->
                </div>
                <div id="cet4-empty" class="empty-state">
                    <img src="https://img.icons8.com/ios/100/000000/nothing-found.png" alt="No wrong questions">
                    <h3>暂无四级错题</h3>
                    <p>答错的四级题目会出现在这里</p>
                </div>
            </div>
            
            <div class="tab-content" id="cet6-tab">
                <div id="cet6-wrong-questions">
                    <!-- 错题将通过JS动态加载 -->
                </div>
                <div id="cet6-empty" class="empty-state">
                    <img src="https://img.icons8.com/ios/100/000000/nothing-found.png" alt="No wrong questions">
                    <h3>暂无六级错题</h3>
                    <p>答错的六级题目会出现在这里</p>
                </div>
            </div>
            
            <div class="tab-content" id="postgraduate-tab">
                <div id="postgraduate-wrong-questions">
                    <!-- 错题将通过JS动态加载 -->
                </div>
                <div id="postgraduate-empty" class="empty-state">
                    <img src="https://img.icons8.com/ios/100/000000/nothing-found.png" alt="No wrong questions">
                    <h3>暂无考研错题</h3>
                    <p>答错的考研题目会出现在这里</p>
                </div>
            </div>
            
            <div class="flex-center" style="margin-top: 2rem;">
                <button id="back-to-home-btn-3" class="btn btn-outline">返回首页</button>
            </div>
        </div>
    </div>
    
    <div class="floating-btn hidden" id="home-float-btn">
        <i>🏠</i>
    </div>
    
    <canvas id="confetti" class="confetti hidden"></canvas>
    
    <script>
        // 全局变量
        let currentPage = 'home';
        let examType = '';
        let questions = [];
        let currentQuestionIndex = 0;
        let userAnswers = [];
        let wrongQuestions = {
            CET4: [],
            CET6: [],
            POSTGRADUATE: []
        };
        
        // DOM元素
        const homePage = document.getElementById('home-page');
        const examTypePage = document.getElementById('exam-type-page');
        const quizPage = document.getElementById('quiz-page');
        const wrongQuestionsPage = document.getElementById('wrong-questions-page');
        const startBtn = document.getElementById('start-btn');
        const wrongQuestionsBtn = document.getElementById('wrong-questions-btn');
        const backToHomeBtns = document.querySelectorAll('[id^="back-to-home-btn"]');
        const quizContent = document.getElementById('quiz-content');
        const loadingQuestions = document.getElementById('loading-questions');
        const questionText = document.getElementById('question-text');
        const optionsContainer = document.getElementById('options-container');
        const submitAnswerBtn = document.getElementById('submit-answer-btn');
        const nextQuestionBtn = document.getElementById('next-question-btn');
        const progressBar = document.getElementById('progress-bar');
        const resultContent = document.getElementById('result-content');
        const scoreText = document.getElementById('score-text');
        const resultMessage = document.getElementById('result-message');
        const reviewWrongBtn = document.getElementById('review-wrong-btn');
        const tryAgainBtn = document.getElementById('try-again-btn');
        const wrongQuestionsReview = document.getElementById('wrong-questions-review');
        const wrongQuestionsContainer = document.getElementById('wrong-questions-container');
        const homeFloatBtn = document.getElementById('home-float-btn');
        const confettiCanvas = document.getElementById('confetti');
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 加载本地存储的错题
            loadWrongQuestions();
            
            // 事件监听
            startBtn.addEventListener('click', showExamTypePage);
            wrongQuestionsBtn.addEventListener('click', showWrongQuestionsPage);
            
            backToHomeBtns.forEach(btn => {
                btn.addEventListener('click', showHomePage);
            });
            
            submitAnswerBtn.addEventListener('click', submitAnswer);
            nextQuestionBtn.addEventListener('click', showNextQuestion);
            reviewWrongBtn.addEventListener('click', showWrongQuestionsReview);
            tryAgainBtn.addEventListener('click', tryAgain);
            homeFloatBtn.addEventListener('click', showHomePage);
            
            // 标签页切换
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabs.forEach(t => t.classList.remove('active'));
                    tabContents.forEach(c => c.classList.remove('active'));
                    
                    tab.classList.add('active');
                    document.getElementById(`${tab.dataset.tab}-tab`).classList.add('active');
                });
            });
        });
        
        // 页面导航函数
        function showHomePage() {
            currentPage = 'home';
            homePage.classList.remove('hidden');
            examTypePage.classList.add('hidden');
            quizPage.classList.add('hidden');
            wrongQuestionsPage.classList.add('hidden');
            homeFloatBtn.classList.add('hidden');
        }
        
        function showExamTypePage() {
            currentPage = 'exam-type';
            homePage.classList.add('hidden');
            examTypePage.classList.remove('hidden');
            quizPage.classList.add('hidden');
            wrongQuestionsPage.classList.add('hidden');
            homeFloatBtn.classList.remove('hidden');
        }
        
        function showQuizPage() {
            currentPage = 'quiz';
            homePage.classList.add('hidden');
            examTypePage.classList.add('hidden');
            quizPage.classList.remove('hidden');
            wrongQuestionsPage.classList.add('hidden');
            homeFloatBtn.classList.remove('hidden');
        }
        
        function showWrongQuestionsPage() {
            currentPage = 'wrong-questions';
            homePage.classList.add('hidden');
            examTypePage.classList.add('hidden');
            quizPage.classList.add('hidden');
            wrongQuestionsPage.classList.remove('hidden');
            homeFloatBtn.classList.remove('hidden');
            
            // 加载错题
            renderWrongQuestions();
        }
        
        // 选择考试类型
        function selectExamType(type) {
            examType = type;
            startQuiz();
        }
        
        // 开始答题
        function startQuiz() {
            showQuizPage();
            questions = [];
            currentQuestionIndex = 0;
            userAnswers = [];
            quizContent.classList.add('hidden');
            loadingQuestions.classList.remove('hidden');
            resultContent.classList.add('hidden');
            submitAnswerBtn.classList.add('hidden');
            nextQuestionBtn.classList.add('hidden');
            
            // 使用DeepSeek API生成题目
            generateQuestions();
        }
        
        // 使用DeepSeek API生成题目
        function generateQuestions() {
            const prompt = getPromptByExamType();
            
            // 这里应该是调用DeepSeek API的代码
            // 由于安全原因，不建议在前端直接使用API key
            // 实际应用中应该通过后端服务调用API
            
            // 模拟API调用
            setTimeout(() => {
                // 模拟生成的题目
                questions = generateMockQuestions(examType);
                loadingQuestions.classList.add('hidden');
                quizContent.classList.remove('hidden');
                submitAnswerBtn.classList.remove('hidden');
                showQuestion();
            }, 1500);
        }
        
        // 根据考试类型获取提示词
        function getPromptByExamType() {
            const prompts = {
                CET4: "Generate 10 multiple-choice English questions for CET4 level, including vocabulary, grammar, and reading comprehension. Provide 4 options for each question and indicate the correct answer.",
                CET6: "Generate 10 challenging multiple-choice English questions for CET6 level, focusing on advanced vocabulary, complex grammar structures, and reading comprehension. Provide 4 options for each question and indicate the correct answer.",
                POSTGRADUATE: "Generate 10 advanced multiple-choice English questions for Chinese postgraduate entrance exam level, covering vocabulary in context, complex grammar, and reading comprehension with academic texts. Provide 4 options for each question and indicate the correct answer."
            };
            return prompts[examType] || prompts.CET4;
        }
        
        // 显示当前题目
        function showQuestion() {
            if (currentQuestionIndex >= questions.length) {
                showResult();
                return;
            }
            
            const question = questions[currentQuestionIndex];
            questionText.textContent = `${currentQuestionIndex + 1}. ${question.question}`;
            
            optionsContainer.innerHTML = '';
            question.options.forEach((option, index) => {
                const optionElement = document.createElement('div');
                optionElement.className = 'option';
                optionElement.innerHTML = `
                    <input type="radio" name="answer" id="option-${index}" value="${option}">
                    <label for="option-${index}">${option}</label>
                `;
                optionElement.addEventListener('click', () => {
                    document.getElementById(`option-${index}`).checked = true;
                    document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
                    optionElement.classList.add('selected');
                });
                optionsContainer.appendChild(optionElement);
            });
            
            // 更新进度条
            progressBar.style.width = `${(currentQuestionIndex / questions.length) * 100}%`;
            
            // 如果是最后一题，改变按钮文本
            if (currentQuestionIndex === questions.length - 1) {
                submitAnswerBtn.textContent = '完成答题';
            } else {
                submitAnswerBtn.textContent = '提交答案';
            }
        }
        
        // 提交答案
        function submitAnswer() {
            const selectedOption = document.querySelector('input[name="answer"]:checked');
            if (!selectedOption) {
                alert('请选择一个答案');
                return;
            }
            
            const userAnswer = selectedOption.value;
            const correctAnswer = questions[currentQuestionIndex].correctAnswer;
            const isCorrect = userAnswer === correctAnswer;
            
            // 记录用户答案
            userAnswers.push({
                question: questions[currentQuestionIndex].question,
                userAnswer,
                correctAnswer,
                isCorrect
            });
            
            // 显示正确答案
            document.querySelectorAll('.option').forEach(option => {
                option.classList.remove('selected', 'correct', 'incorrect');
                const optionValue = option.querySelector('input').value;
                if (optionValue === correctAnswer) {
                    option.classList.add('correct');
                } else if (optionValue === userAnswer && !isCorrect) {
                    option.classList.add('incorrect');
                }
            });
            
            // 保存错题
            if (!isCorrect) {
                saveWrongQuestion(questions[currentQuestionIndex]);
            }
            
            submitAnswerBtn.classList.add('hidden');
            nextQuestionBtn.classList.remove('hidden');
        }
        
        // 显示下一题
        function showNextQuestion() {
            currentQuestionIndex++;
            nextQuestionBtn.classList.add('hidden');
            submitAnswerBtn.classList.remove('hidden');
            showQuestion();
        }
        
        // 显示结果
        function showResult() {
            quizContent.classList.add('hidden');
            resultContent.classList.remove('hidden');
            
            const correctCount = userAnswers.filter(answer => answer.isCorrect).length;
            const score = Math.round((correctCount / questions.length) * 100);
            
            scoreText.textContent = `${score}`;
            
            // 根据分数显示不同的消息
            if (score >= 90) {
                resultMessage.textContent = '太棒了！你的表现非常出色！';
                showConfetti();
            } else if (score >= 70) {
                resultMessage.textContent = '做得不错！继续努力！';
            } else if (score >= 50) {
                resultMessage.textContent = '还可以，但还有提升空间！';
            } else {
                resultMessage.textContent = '需要多加练习，加油！';
            }
            
            // 更新进度条到100%
            progressBar.style.width = '100%';
        }
        
        // 显示错题回顾
        function showWrongQuestionsReview() {
            wrongQuestionsReview.classList.remove('hidden');
            wrongQuestionsContainer.innerHTML = '';
            
            const wrongAnswers = userAnswers.filter(answer => !answer.isCorrect);
            
            if (wrongAnswers.length === 0) {
                wrongQuestionsContainer.innerHTML = '<p>没有错题，太棒了！</p>';
                return;
            }
            
            wrongAnswers.forEach((answer, index) => {
                const wrongQuestionElement = document.createElement('div');
                wrongQuestionElement.className = 'wrong-question';
                wrongQuestionElement.innerHTML = `
                    <div class="question">${index + 1}. ${answer.question}</div>
                    <div>你的答案: <span style="color: var(--error-color);">${answer.userAnswer}</span></div>
                    <div class="correct-answer">正确答案: ${answer.correctAnswer}</div>
                `;
                wrongQuestionsContainer.appendChild(wrongQuestionElement);
            });
        }
        
        // 再试一次
        function tryAgain() {
            startQuiz();
        }
        
        // 保存错题
        function saveWrongQuestion(question) {
            wrongQuestions[examType].push(question);
            localStorage.setItem('wrongQuestions', JSON.stringify(wrongQuestions));
        }
        
        // 加载错题
        function loadWrongQuestions() {
            const savedWrongQuestions = localStorage.getItem('wrongQuestions');
            if (savedWrongQuestions) {
                wrongQuestions = JSON.parse(savedWrongQuestions);
            }
        }
        
        // 渲染错题
        function renderWrongQuestions() {
            renderWrongQuestionsForType('CET4', 'cet4-wrong-questions', 'cet4-empty');
            renderWrongQuestionsForType('CET6', 'cet6-wrong-questions', 'cet6-empty');
            renderWrongQuestionsForType('POSTGRADUATE', 'postgraduate-wrong-questions', 'postgraduate-empty');
        }
        
        function renderWrongQuestionsForType(type, containerId, emptyId) {
            const container = document.getElementById(containerId);
            const emptyState = document.getElementById(emptyId);
            
            container.innerHTML = '';
            
            if (wrongQuestions[type].length === 0) {
                emptyState.classList.remove('hidden');
                container.classList.add('hidden');
            } else {
                emptyState.classList.add('hidden');
                container.classList.remove('hidden');
                
                wrongQuestions[type].forEach((question, index) => {
                    const questionElement = document.createElement('div');
                    questionElement.className = 'wrong-question';
                    questionElement.innerHTML = `
                        <div class="question">${index + 1}. ${question.question}</div>
                        <div class="options">
                            ${question.options.map(opt => `
                                <div class="option ${opt === question.correctAnswer ? 'correct' : ''}">
                                    ${opt}
                                </div>
                            `).join('')}
                        </div>
                    `;
                    container.appendChild(questionElement);
                });
            }
        }
        
        // 彩花效果
        function showConfetti() {
            confettiCanvas.classList.remove('hidden');
            const canvas = confettiCanvas;
            const ctx = canvas.getContext('2d');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            const particles = [];
            const colors = ['#4361ee', '#3f37c9', '#4895ef', '#4cc9f0', '#f72585'];
            
            // 创建粒子
            for (let i = 0; i < 150; i++) {
                particles.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height - canvas.height,
                    size: Math.random() * 8 + 3,
                    color: colors[Math.floor(Math.random() * colors.length)],
                    speed: Math.random() * 3 + 2,
                    angle: Math.random() * Math.PI * 2,
                    rotation: Math.random() * 0.2 - 0.1,
                    rotationSpeed: Math.random() * 0.01 - 0.005
                });
            }
            
            // 动画
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                let stillAlive = false;
                
                particles.forEach(particle => {
                    particle.y += particle.speed;
                    particle.x += Math.sin(particle.angle) * 1;
                    particle.angle += particle.rotationSpeed;
                    
                    if (particle.y < canvas.height) {
                        stillAlive = true;
                    }
                    
                    ctx.save();
                    ctx.translate(particle.x, particle.y);
                    ctx.rotate(particle.angle);
                    ctx.fillStyle = particle.color;
                    ctx.fillRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size);
                    ctx.restore();
                });
                
                if (stillAlive) {
                    requestAnimationFrame(animate);
                } else {
                    confettiCanvas.classList.add('hidden');
                }
            }
            
            animate();
        }
        
        // 窗口大小改变时调整彩花画布
        window.addEventListener('resize', function() {
            if (!confettiCanvas.classList.contains('hidden')) {
                confettiCanvas.width = window.innerWidth;
                confettiCanvas.height = window.innerHeight;
            }
        });
        
        // 模拟生成题目
        function generateMockQuestions(type) {
            const questionTypes = {
                CET4: [
                    {
                        question: "The students ______ their homework when the teacher came in.",
                        options: [
                            "were doing",
                            "did",
                            "had done",
                            "have done"
                        ],
                        correctAnswer: "were doing"
                    },
                    {
                        question: "If I ______ you, I would apologize to her immediately.",
                        options: [
                            "am",
                            "was",
                            "were",
                            "had been"
                        ],
                        correctAnswer: "were"
                    },
                    {
                        question: "The book ______ I bought yesterday is very interesting.",
                        options: [
                            "who",
                            "whom",
                            "which",
                            "whose"
                        ],
                        correctAnswer: "which"
                    },
                    {
                        question: "By the time we arrived, the movie ______.",
                        options: [
                            "already started",
                            "had already started",
                            "has already started",
                            "was already starting"
                        ],
                        correctAnswer: "had already started"
                    },
                    {
                        question: "She suggested ______ to the museum this weekend.",
                        options: [
                            "to go",
                            "going",
                            "go",
                            "went"
                        ],
                        correctAnswer: "going"
                    },
                    {
                        question: "The more you practice, ______ you will become.",
                        options: [
                            "the better",
                            "better",
                            "the best",
                            "best"
                        ],
                        correctAnswer: "the better"
                    },
                    {
                        question: "It's high time we ______ our project.",
                        options: [
                            "start",
                            "started",
                            "have started",
                            "will start"
                        ],
                        correctAnswer: "started"
                    },
                    {
                        question: "Not only my parents but also my brother ______ to attend the ceremony.",
                        options: [
                            "want",
                            "wants",
                            "are wanting",
                            "have wanted"
                        ],
                        correctAnswer: "wants"
                    },
                    {
                        question: "The news ______ too good to be true.",
                        options: [
                            "is",
                            "are",
                            "were",
                            "have been"
                        ],
                        correctAnswer: "is"
                    },
                    {
                        question: "______ he was tired, he continued working.",
                        options: [
                            "Although",
                            "Because",
                            "Since",
                            "Unless"
                        ],
                        correctAnswer: "Although"
                    }
                ],
                CET6: [
                    {
                        question: "The committee ______ divided in their opinions about the proposal.",
                        options: [
                            "is",
                            "are",
                            "was",
                            "were"
                        ],
                        correctAnswer: "is"
                    },
                    {
                        question: "Had I known about the traffic jam, I ______ a different route.",
                        options: [
                            "would take",
                            "would have taken",
                            "took",
                            "had taken"
                        ],
                        correctAnswer: "would have taken"
                    },
                    {
                        question: "The CEO, along with his assistants, ______ to attend the conference.",
                        options: [
                            "is",
                            "are",
                            "were",
                            "have been"
                        ],
                        correctAnswer: "is"
                    },
                    {
                        question: "Not until the end of the movie ______ the identity of the murderer.",
                        options: [
                            "we knew",
                            "did we know",
                            "we didn't know",
                            "we had known"
                        ],
                        correctAnswer: "did we know"
                    },
                    {
                        question: "The novel is said ______ into more than 20 languages.",
                        options: [
                            "to translate",
                            "to have translated",
                            "to be translating",
                            "to have been translated"
                        ],
                        correctAnswer: "to have been translated"
                    },
                    {
                        question: "______ the rain, the outdoor concert was a great success.",
                        options: [
                            "In spite",
                            "Despite",
                            "Although",
                            "However"
                        ],
                        correctAnswer: "Despite"
                    },
                    {
                        question: "The professor required that the paper ______ by Friday.",
                        options: [
                            "was submitted",
                            "be submitted",
                            "would be submitted",
                            "had been submitted"
                        ],
                        correctAnswer: "be submitted"
                    },
                    {
                        question: "The more complex the problem, ______ time is needed to solve it.",
                        options: [
                            "the more",
                            "more",
                            "the most",
                            "most"
                        ],
                        correctAnswer: "the more"
                    },
                    {
                        question: "It was in the small village ______ the famous writer spent his childhood.",
                        options: [
                            "where",
                            "that",
                            "which",
                            "when"
                        ],
                        correctAnswer: "that"
                    },
                    {
                        question: "The government is considering ______ new measures to combat inflation.",
                        options: [
                            "to introduce",
                            "introducing",
                            "introduce",
                            "introduced"
                        ],
                        correctAnswer: "introducing"
                    }
                ],
                POSTGRADUATE: [
                    {
                        question: "The implications of the research ______ far-reaching consequences for future studies.",
                        options: [
                            "bear",
                            "carry",
                            "hold",
                            "possess"
                        ],
                        correctAnswer: "bear"
                    },
                    {
                        question: "______ the fact that the experiment was conducted under controlled conditions, the results were inconsistent.",
                        options: [
                            "Despite",
                            "Although",
                            "Whereas",
                            "Nevertheless"
                        ],
                        correctAnswer: "Despite"
                    },
                    {
                        question: "The data ______ in the report suggest a significant correlation between the variables.",
                        options: [
                            "presented",
                            "presenting",
                            "to present",
                            "being presented"
                        ],
                        correctAnswer: "presented"
                    },
                    {
                        question: "The hypothesis, ______ plausible at first glance, failed to withstand rigorous testing.",
                        options: [
                            "though",
                            "however",
                            "despite",
                            "nevertheless"
                        ],
                        correctAnswer: "though"
                    },
                    {
                        question: "The research team was commended for ______ a novel approach to the problem.",
                        options: [
                            "having devised",
                            "devising",
                            "to have devised",
                            "to devise"
                        ],
                        correctAnswer: "having devised"
                    },
                    {
                        question: "The findings are consistent ______ previous studies in the field.",
                        options: [
                            "to",
                            "with",
                            "for",
                            "in"
                        ],
                        correctAnswer: "with"
                    },
                    {
                        question: "______ the initial setbacks, the project ultimately proved successful.",
                        options: [
                            "Notwithstanding",
                            "However",
                            "Although",
                            "Whereas"
                        ],
                        correctAnswer: "Notwithstanding"
                    },
                    {
                        question: "The methodology employed in the study ______ careful scrutiny.",
                        options: [
                            "merits",
                            "deserves",
                            "requires",
                            "demands"
                        ],
                        correctAnswer: "merits"
                    },
                    {
                        question: "The results were ______ significant to warrant publication in a top-tier journal.",
                        options: [
                            "so",
                            "such",
                            "too",
                            "enough"
                        ],
                        correctAnswer: "enough"
                    },
                    {
                        question: "The author's argument, ______ cogent it may appear, is based on flawed assumptions.",
                        options: [
                            "however",
                            "although",
                            "as",
                            "despite"
                        ],
                        correctAnswer: "however"
                    }
                ]
            };
            
            return questionTypes[type] || questionTypes.CET4;
        }
    </script>
</body>
</html>